import React from 'react';
import ReactDOM from 'react-dom';
import './06props.css'



function ListItem(props){
  return(
    <li >
    <h3>{props.index}:ListItem:{props.data.title}</h3>
   <p>{props.index}:ListItem:{props.data.content}</p>
  </li>
  )
}



class ListItem2 extends React.Component{
  constructor(props){
    super(props)
  }
  render(){
    return(
      <li onClick={(e)=>{this.clickEvent(
        this.props.index,
        this.props.data.title,
        e)}} >
      <h3>{this.props.index}:ListItem:{this.props.data.title}</h3>
     <p>{this.props.index}:ListItem:{this.props.data.content}</p>
    </li>
    )
  }
  clickEvent = (index,title,event)=>{
    alert((index+1) +'-'+ title)
  }

}




class Welcome extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      list : [
        {
          title: '第一节 React事件',
          content: '事件内容'
        },
       
         {
            title: '第二节 React数据传递',
            content: '数据传递内容'
          },

          {
            title: '第三节 React条件渲染',
            content: '条件渲染内容'
          },
        ]
  }
}
render(){
  let listArr = this.state.list.map((item,index)=>{
    return (  
      <ListItem2 key ={index} data={item} index={index}></ListItem2>
     
    )
  })
    console.log(listArr);
  return(
    <div>
      <h1>
        今天课程内容
      </h1>
      <ul>
        {listArr}
        <li>
          <h3>这是标题</h3>
          <p>内容</p>
        </li>
      </ul>

    <h1>复杂没有用组件完成列表</h1>
    {
      this.state.list.map((item,index)=>{
        return(
          <li key={index} onClick={(e)=>{this.clickFn(index,item.title,e)}}>
          <h3>{index+1}:复杂:{item.title}</h3>
        <p>{item.content}</p>
        </li>
        )
      })
    }
    </div>
  )
}
clickFn=(index,title,e)=>{
  alert((index+1) +'-clickFn-'+ title)
}
  
}

  ReactDOM.render(
    <Welcome /> ,
    document.querySelector('#root')
  )

    // console.log(new Date()); 不会初始化
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA

